<template>
    <div>
        <el-dialog :title="props.id === 0 ? '添加时间段' : '编辑时间段'" :model-value="props.HideDisplay" @close="cancelFb">
            <el-form :model="form" label-width="120px">
                <el-form-item label="秒杀时间段名称">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="每日开始时间">
                    <el-col :span="11">
                        <el-date-picker v-model="form.startTime" type="date" placeholder="请选择时间" style="width: 100%" />
                    </el-col>
                </el-form-item>
                <el-form-item label="每日死亡时间">
                    <el-col :span="11">
                        <el-date-picker v-model="form.endTime" type="date" placeholder="请选择死亡时间" style="width: 100%" />
                    </el-col>
                </el-form-item>
                <el-form-item label="是否启用">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="0">不启用</el-radio>
                        <el-radio :label="1">启用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">确认</el-button>
                    <el-button @click="cancel">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus';
import { reactive, watch } from 'vue';
import * as http from '@/request/http'

//表单数据
const form = reactive({
    name: '',
    startTime: '',
    endTime: '',
    status: 0,
    id: 0
})

// 接收 父组件 传过来的 参数
const props = withDefaults(defineProps<{
    HideDisplay: boolean,
    id: number
}>(), {
    HideDisplay: true,
    id: 0
})

const emits = defineEmits<{
    (e: "cancel"): void;
    (e: "confirm"): void;
}>()


const cancel = () => {
    emits('cancel')
}

const cancelFb = () => {
    emits('cancel')
}

//添加活动
const addition = () => {
    ElMessageBox.confirm(
        '是否要确定?',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        //发起请求，添加时间段
        http.flashSs.IflashCreate(form).then(res => {
            if (res.code == 200) {
                ElMessage.success("成功添加")
                emits('confirm')
            }

        })

    }).catch(() => {
        ElMessage.warning("取消成功")
    })
}
//编辑时间段
const editSession = () => {
    ElMessageBox.confirm(
        '是否要确认?',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => { //编辑
        //发起请求，编辑时间段
        http.flashSs.flashSessionUpdate(form).then(res => {//判断是否成功编辑时间段
            if (res.code === 200) {
                ElMessage.success("成功编辑")

                emits('confirm')
            }
        })
    }).catch(() => {
        ElMessage.warning('取消编辑')
    })
}
const onSubmit = () => { //确认
    if (props.id == 0) {
        addition() //添加活动
    } else {
        editSession()
    }
}

//监听活动id的变化,更新面包屑
watch(
    () => props.id,
    () => {
        console.log("用户id变化了...");
        if (props.id != 0) {
            http.flashSs.flashSessionId(props.id).then(res => {
                console.log(res);
                Object.assign(form, res.data)
            })
        }

    }
)

</script>

<style scoped></style>